<template>
  <div class="list-container">
    <!--<div style="margin-top: 100px;height:900px">e19023u12j931</div>-->
    <mt-loadmore
      @top-status-change="topStatusChange"
      :topDistance="40"
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="bottomLoaded"
      :auto-fill="false"
      ref="loadmore">
      <div v-if="keepPromissCount != null" class="keepPromissCountBG">
        <font style="font-size: .8rem;margin-right: .1rem;">{{keepPromissCount}}</font>次守约记录
      </div>
      <ul class="fileList">
        <li v-for="file in fileList">
          <p class="clearfix">
            <span class="house-address">{{file.leaseAddress}}履约记录</span>
          </p>
          <hr class="line"/>
          <p v-if="file.contractStatus === 0" class="file-item clearfix">
            <span>履约状态</span>
            <span>尚未开始</span>
          </p>
          <p v-if="file.contractStatus !== 0" class="file-item clearfix">
            <span>出租人</span>
            <span>{{file.landlordName}}</span>
          </p>
          <p v-if="file.contractStatus !== 0" class="file-item clearfix">
            <span>承租人</span>
            <span>{{file.tenantName}}</span>
          </p>
          <p v-if="file.contractStatus !== 0" class="file-item clearfix">
            <span>租金</span>
            <span>{{file.monthRent}}元/月</span>
          </p>
          <p v-if="file.contractStatus !== 0" class="file-item clearfix">
            <span>履约状态</span>
            <span style="color: #35A8FF;">{{file.contractStatus == 1?'进行中，交易双方尚未提出异议':'已完结，交易双方均未提出异议'}}</span>
          </p>
          <p v-if="file.contractStatus !== 0" class="file-item clearfix">
            <span>履约时间</span>
            <span>{{file.contractValidityStartTime.slice(0,10)}} ~ {{file.contractValidityEndTime.slice(0,10)}}</span>
          </p>
        </li>
      </ul>
      <div slot="top" class="topLoading" :class="{'onLoading':topLoading}">
        <mt-spinner :class="'snakePull'" type="snake" color="#e02e08" :size="20"></mt-spinner>
      </div>
      <mt-spinner
        type="snake"
        color="#e02e08"
        :size='20'
        :class="'loadingMore'"
        v-show="bottomLoaded"
      ></mt-spinner>
      <div v-if="noMoreData" class="no-more-data">
        <span>没有更多数据了</span>
      </div>
    </mt-loadmore>
  </div>
</template>
<script>
  import {
    TENANT_TOKEN,
    TENANT_INFO,
    renterLeaseListPath,
    contractStatusList,
    TENANT_ACCOUNT,
    renterKeepPromissCount
  } from '../../assets/js/config'
  // 获取缓存对象，使用缓存方法
  import cache from '../../assets/js/cache'

  export default {
    name: 'leaseList',
    data () {
      return {
        contractStatusList,
        sendData: {
          role: 'renter',
          order: 'asc',
          sidx: '',
          id: '',
          page: 1,
          limit: 10,
          phone: ''
        },
        keepPromissCount: null,
        fileList: [],
        noMoreData: false,
        topLoading: false,
        bottomLoaded: false
      }
    },
    created () {
      console.log(contractStatusList)
      let token = cache.get(TENANT_TOKEN)
      let phone = cache.get(TENANT_ACCOUNT)
      console.log(token, phone)
      console.log(phone, 22)
      if (token === null) {
        this.$router.push({path: '/'})
      } else {}
      let userInfo = cache.get(TENANT_INFO, true)
      this.sendData.id = userInfo.id
      this.sendData.phone = phone
    },
    mounted () {
      this.getFileList()
      this.getKeepPromissCount()
    },
    methods: {
      getKeepPromissCount () {
        let myVue = this
        this.get({
          url: renterKeepPromissCount,
          sendData: {},
          role: '',
          success (data) {
            if (data.code === '0') {
              myVue.keepPromissCount = data.count
            }
          }
        })
      },
      getFileList () {
        let myVue = this
        this.get({
          url: renterLeaseListPath,
          sendData: myVue.sendData,
          role: '',
          success (data) {
            console.log(data)
            if (data.page && data.page.list && data.page.list.length) {
              data.page.list.forEach(function (ele) {
                myVue.fileList.push(ele)
              })
              myVue.sendData.page++
              myVue.bottomLoaded = false
            } else {
              myVue.bottomLoaded = false
              myVue.noMoreData = true
            }
          }
        })
      },
      topStatusChange (status) {
        let myVue = this
        if (status === 'drop') {
          if (!this.topLoading) {
            this.topLoading = true
            setTimeout(s => {
              myVue.sendData.page = 1
              myVue.fileList = []
              this.topLoading = false
              myVue.noMoreData = false
              myVue.getFileList()
              myVue.getKeepPromissCount()
            }, 1000)
          }
        }
      },
      loadTop (id) {
        this.$refs.loadmore.onTopLoaded(id)
      },
      loadBottom () {
        this.bottomLoaded = true
        this.$refs.loadmore.onBottomLoaded()
        this.getFileList()
      },
      goToLeaseDetail (data) {
        let id = data.id
        let status = data.status
        console.log(data.leasesNo)
        this.$router.push({path: '/contractInfo', query: {id, status, roleName: 'renter'}})
      }
    }
  }
</script>
<style scoped>
  .list-container {
    margin-top: 2rem;
    padding-top: 0;
    /*margin-bottom:1.2rem;*/
  }

  .house-address {
    float: left;
    text-align: left;
    line-height: .5rem;
    padding: .24rem 0;
  }

  .mint-loadmore {
    background-color: transparent;
  }

  .loadingMore {
    margin-top: 0.16rem;
  }
  .keepPromissCountBG{
    width:100%;
    text-align: center;
    line-height:2.24rem;
    font-size: .36rem;
    color: #fff;
    background: url("../../assets/img/keepPromissBG@2x.png")no-repeat;
    background-size: 100%;
  }
  .line{
    border:none;
    background-color:#dedede;
    height:1px;
  }
  .fileList > li{
    line-height: .88rem;
    background-color: #fff;
    font-size: 0.28rem;
  }
  .fileList > li > p{
    margin:0px .4rem;
  }
  .file-item > span:nth-child(1){
    color:#808080;
    float: left;
  }
  .file-item > span:nth-child(2){
    color:#404040;
    float: right;
    text-align: right;
  }
  .fileList li {
    margin-top:0.2rem;
  }

</style>
